<template>
  <header class="base-header flex">
    <router-link tag="a" :to="{path: '/'}">
      <img class="left-side logo" src="https://s1.ax1x.com/2020/10/07/0aXWVJ.png" alt="">
    </router-link>
    
    <!-- 右边 -->
    <div class="right-side flex">
      <div class="search-input-box"><input type="text"></div>
      <div :class="['right-att', aliveUserInfo.nickname && 'flex']">
        <!-- 登入 -->
        <template v-if="aliveUserInfo.nickname" >
          <router-link class="user-avatar" tag="span" :to="{name: 'Mine'}"
            :style="{
              backgroundImage: `url(${aliveUserInfo.avatar_url || 'https://w.wallhaven.cc/full/r2/wallhaven-r2kve7.jpg'})`
            }"
          ></router-link>
          <!-- <span class="user-name">{{aliveUserInfo.nickname}}</span> -->
          <!-- 注意这里点击消失就是希望这么做的，不然不好处理 -->
          <span class="function-btn flex" @click="functionItemBoxShow=!functionItemBoxShow">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <div class="function-item-box flex" v-if="functionItemBoxShow">
              <div class="function-route-box flex">
                <router-link tag="div" class="function-box" v-for="data of mineFunctionRoute" :key="data.name" :to="data.route"
                  :style="{
                    backgroundImage: `url(${data.cover_url})`
                  }">
                  {{data.name}} 
                </router-link>
              </div>
              <div class="function-item change-user" @click="changeUser">切换账号</div>
              <div class="function-item login-out" @click="loginOut">退出账号</div>
            </div>
          </span>


        </template>
        <!-- 登入 -->

        <!-- 未登入 -->
        <template v-else>
          <router-link class="link" tag="span" :to="{name: 'Login'}">Sgin In</router-link> &nbsp; | &nbsp;
          <router-link class="link" tag="span" :to="{name: 'Register'}">Sign Up</router-link> 
        </template>
        <!-- 未登入 -->
      </div>
    </div>
    <!-- 右边 -->
  </header>
</template>

<script>
//登入注册移交到 outLogin 混入去做
import outLogin from '__CORE__/mixins/loginOut.js'
export default {
  name: 'BaseHeader',
  mixins: [outLogin],
  computed: {
    aliveUserInfo() {
      return this.$store.state.user.aliveUserInfo
    },
    //自定义路由
    mineFunctionRoute() {
      return this.$store.state.globalConfig.mineFunctionRoute
    }
  },
  data: ()=>({
    functionItemBoxShow: false
  })
}
</script>

<style lang="less">
  @import url('./base_header.less');
</style>